<template>
  <div class="second-level-ai">
    <a-form
      :model="formState"
      labelAlign="left"
      :label-col="{ span: 24 }"
      :wrapper-col="{ span: 24 }"
    >
      <a-form-item label="专题（一级）名称：">
        <a-select
          v-model:value="formState.region"
          placeholder="please select your zone"
          style="width: 300px"
        >
          <a-select-option value="shanghai">Zone one</a-select-option>
          <a-select-option value="beijing">Zone two</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="分类（二级）名称：">
        <a-select
          v-model:value="formState.region"
          placeholder="please select your zone"
          style="width: 300px"
        >
          <a-select-option value="shanghai">Zone one</a-select-option>
          <a-select-option value="beijing">Zone two</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="标签（三级）名称：">
        <div>
          <supper-tag :checkableTag="true"></supper-tag>
          <tag-form></tag-form>
        </div>
      </a-form-item>
      <a-form-item>
        <a-button>取消</a-button>
        <a-button type="primary" style="margin-left: 10px">确定</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, UnwrapRef, reactive } from 'vue';
import SupperTag from '@/views/magic-cube/label-supermarket/production/components/supper-tag/index.vue';
import TagForm from '@/views/magic-cube/label-supermarket/production/components/tag-form/index.vue';
interface FormState {
  name: string;
}

export default defineComponent({
  name: 'second-level-ai',
  components: { SupperTag, TagForm },
  setup() {
    const formState: UnwrapRef<FormState> = reactive({
      name: '',
      region: '',
    });
    return {
      formState,
    };
  },
});
</script>

<style lang="less" scoped></style>
